@charset "utf-8";
$font-size:40;
@function rem($px) {
    @return $px/$font-size*1rem;
}

header{
    .explain{
        width: rem(38);
        margin-right: rem(20);
        margin-top: rem(22);
        img{
            width: 100%;
            height: 100%;
        }
    }
}


.wrap{
    width: 100%;
    overflow: hidden;
}
.nav3{
    width: 100%;
    height: rem(80);
    background: #FFFFFF;
    border-bottom: rem(1) solid #CCCCCC;
}
.tabClick {
    width: 70%;
    height: rem(80);
    background: #FFFFFF;
    overflow: hidden;
    margin: 0 auto;
    li {
    width: 35%;
    height: rem(78);
    line-height: rem(80);
    font-size: rem(30);
    float: left;
    text-align: center;
    white-space: nowrap;
}
 #two{
      width: 30%;
       float: right;
   }
li.active {
    
    color: #d62d31;
    transition: 0.1s;
    border-bottom: rem(2) solid #d62d31;
}
}

.tabCon {
    overflow: hidden
}

.tabBox {
    position: relative
}

.tabList {
    word-break: break-all;
    width: 100%;
    height: 100%;
    float: left; 
    font-family: "Arial Black"
}
.content{
    width: 95%;
     height: rem(200);
    margin: rem(20) auto 0 auto;
    box-sizing: border-box;
    position: relative;
    
    
    #checkboxall1,#checkboxall2,#checkboxall3,#checkboxall4,#checkboxall5,#checkboxall6,#checkboxall7{
       display: inline-block;
        width: rem(40);
         height: rem(58);
       position: relative;
      float: left;
      margin-top: rem(70);
      display: none;
       
        
        input[type="checkbox"]{
         position: absolute;
         top: 0;
         left: 0;
         display: inline-block;
         width: rem(40);
         height: rem(58);
         opacity: 0;
         z-index: 12;
        }
    label{
        position: absolute;
        top: rem(5);
        left: 0;
        display:inline-block;
        width:rem(33);
        height: rem(33);
        border-radius: 50%;
        border: rem(1) solid #CCCCCC; 
       
    }
    input[type="checkbox"]:checked + label{
        background: url("../img/icon_check.png")no-repeat;
        background-size: 100%;    
    }
   }
     
    
    #iconmore2{
       display: none; 
      
    }
     #iconmore3{
       display: none; 
    }
     #iconmore4{
       display: none; 
    }
     #iconmore5{
       display: none; 
    }
    #iconmore6{
       display: none; 
    }
    #iconmore7{
       display: none; 
    }
    #iconmore8{
       display: none; 
    }
    .more{
        position: absolute;
        top: rem(12);
        right: 0;
        width: 90%;
        height: rem(109);
        border-radius: rem(5);
        background: rgba(0,0,0,0.8);
         transition: all 1s ease-in-out 300ms;
       animation: more 1s ease-in-out forwards;
       
       @keyframes more{
           0%{transform: translateX(rem(109));-webkit-transform: translateX(rem(109));opacity: 0.2;}
           50%{transform: translateX(0) skewX(10deg);-webkit-transform: translateX(10deg) skewX(0);opacity: 0.6;}
            100%{transform:skewX(0);-webkit-transform:skewX(0);opacity: 1;}
            
       }
        &::before{
            display: block;
            content: "";
            position: absolute;
            right: rem(19);
            bottom: rem(-12);
            border-top: rem(14) solid #343131;
            border-left: rem(13) solid transparent;
            border-right: rem(13) solid transparent;
        }
        .morecontent{
            width: 20%;
            float: left;
            .compile{
                width: rem(45);
                height: rem(45);
                margin: rem(15) auto rem(15) auto;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
             p{
               color: white;
               font-size: rem(20);
               text-align: center;
           }
        }    
    }
    .mian{
        width: rem(200);
        height: rem(200);
        float: left;
        img{
            width: 100%;
            height: 100%;
        }
    }
    .mian-msg{
        overflow-x: hidden;
        position: relative;
        h5{
            margin-left: rem(8);
            font-size: rem(28);
            line-height: rem(39);
            overflow : hidden; 
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;

        }
        p{
           
             margin-left: rem(8);
            font-size: rem(24);
            color: #999999;
            line-height: rem(60);
            span{
                color: red;
            }
        }
        .icon_shuxing{
            width: rem(44);
            position: absolute;
            right: 0;
            bottom: 0;
            img{
                width: 100%;
                height: 100%;
            }
        }
       .icon_yincang{
            width: rem(44);
            position: absolute;
            right: 0;
            bottom: 0;
            display: none;
            img{
                width: 100%;
                height: 100%;
            }
          
        }
       
    }
    
}

.bottom-btn{
    width: 90%;
    margin: rem(14) auto 0 auto;
   
    #addbtn{
       display: inline-block;
       width: rem(270);
       height: rem(70);
       font-size: rem(26);
       background: #d62d31; 
       border-radius: rem(5);
       color: white;
       text-align: center;
       line-height: rem(70);
    }
     #managebtn{
       display: inline-block;
       width: rem(268);
       height: rem(68);
       font-size: rem(26);
       color: #C1C1C1;
       text-align: center;
       line-height: rem(70);
       background: #FFFFFF; 
       border: rem(1) solid #CCCCCC;
       border-radius: rem(5);
    }
}
.bottom-btn2{
    width: 90%;
    margin: rem(19) auto 0 auto;
    display: none;
   
   .checkboxall{
       display: inline-block;
        width: rem(80);
         height: rem(58);
       position: relative;
      
       span{
           display: inline-block;
           position: absolute;
           right: rem(-5);
           top: rem(19);
           font-size: rem(22);
          
       }
        
        input[type="checkbox"]{
         position: absolute;
         top: 0;
         left: 0;
         display: inline-block;
         width: rem(80);
         height: rem(58);
         opacity: 0;
         z-index: 12;
        }
    label{
        position: absolute;
        top: rem(15);
        left: 0;
        display:inline-block;
        width:rem(33);
        height: rem(33);
        border-radius: 50%;
        border: rem(1) solid #CCCCCC; 
       
    }
    input[type="checkbox"]:checked + label{
        background: url("../img/icon_check.png")no-repeat;
        background-size: 100%;    
    }
   }
     
    #move{
        display: inline-block;
        width: rem(138);
        height: rem(58);
        border: rem(1) solid #CCCCCC;
        text-align: center;
        line-height: rem(58);
        font-size: rem(22);
        color: #C1C1C1;
        margin-right: rem(10);
        float: right;
    }
    #soldout{
        display: inline-block;
        width: rem(138);
        height: rem(58);
        border: rem(1) solid #CCCCCC;
        text-align: center;
        line-height: rem(58);
        font-size: rem(22);
        color: #C1C1C1;
         margin-right: rem(10);
        float: right;
    }
    #delete{
        display: inline-block;
        width: rem(140);
        height: rem(60);
       background: #d62d31;
       text-align: center;
        line-height: rem(58);
        font-size: rem(22);
        color: white;
        margin-right: rem(10);
        float: right;
    }
}

#xiajiabg{
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    position: absolute;
    top :0;
    left: 0;
    z-index: 99;
    display: none;
}
.dialog{
    width: rem(550);
    height: rem(300);
    border-radius: rem(10);
    background: #FFFFFF;
    position: absolute;
    left: rem(45);
    top: rem(464);
    z-index: 999;
    p{
        font-size: rem(30);
        text-align: center;
        line-height: rem(160);
    }
    .soldoutbtn{
        width: 90%;
        height: rem(145);
        margin: 0 auto;
        border-top: rem(1) solid #CCCCCC;
        line-height: rem(145);
        #xiajialeft{
            display: inline-block;
            width: rem(233);
            height: rem(78);
            letter-spacing: rem(4);
            border: rem(1) solid #CCCCCC;
            background: #FFFFFF;
            text-align: center;
            line-height: rem(78);
            font-size: rem(30);
            color: #666666;
            border-radius: rem(5);
        }
        #xiajiaright{
             display: inline-block;
            width: rem(235);
            height: rem(80);
            letter-spacing: rem(4);
            border-radius: rem(5);
            background: #d62d31;
            text-align: center;
            line-height: rem(78);
            font-size: rem(30);
            color: white;
        }
    }
}

#productfinish{
    width: rem(249);
    height: rem(183);
    background: rgba(0,0,0,0.5);
    border-radius: rem(10);
    position: absolute;
    top:rem(500) ;
    left: rem(196);
    z-index: 99;
    display: none;
    
    .finishimg{
        width: rem(69);
        height: rem(69);
        margin:  rem(15) auto rem(15) auto;
        img{
            width: 100%;
            height: 100%;
        }
    }
    p{
        text-align: center;
        font-size:rem(28) ;
        color: white;
    }
}
#productfinish2{
    width: rem(249);
    height: rem(183);
    background: rgba(0,0,0,0.5);
    border-radius: rem(10);
    position: absolute;
    top:rem(500) ;
    left: rem(196);
    z-index: 99;
    display: none;
    
    .finishimg{
        width: rem(69);
        height: rem(69);
        margin:  rem(15) auto rem(15) auto;
        img{
            width: 100%;
            height: 100%;
        }
    }
    p{
        text-align: center;
        font-size:rem(28) ;
        color: white;
    }
}
#productfinish3{
    width: rem(249);
    height: rem(183);
    background: rgba(0,0,0,0.5);
    border-radius: rem(10);
    position: absolute;
    top:rem(500) ;
    left: rem(196);
    z-index: 99;
    display: none;
    
    .finishimg{
        width: rem(69);
        height: rem(69);
        margin:  rem(15) auto rem(15) auto;
        img{
            width: 100%;
            height: 100%;
        }
    }
    p{
        text-align: center;
        font-size:rem(28) ;
        color: white;
    }
}


#generalizeopen{
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    position: absolute;
    left: 0;
    top: 0;
     z-index: 999;
     display: none;
     
     
}

.generalizebg{
    width: 100%;
        height: rem(616);
        background: #FFFFFF;
        position: absolute;
        left: 0;
        bottom: 0;
        z-index: 9990;
        transition: all 1s linear 300ms;
        animation: explain 1s ease-in-out forwards;
         
     @keyframes explain{
         0%{transform: translateY(rem(446));-webkit-transform: translateY(rem(446));opacity: 0.2;}
          100%{transform: translateY(rem(0));-webkit-transform: translateY(rem(0));opacity: 1;}
     }
        a{
            display: inline-block;
            width: 100%;
            height: rem(98);
            border-top: rem(1) solid #CCCCCC;
            text-align: center;
            line-height: rem(98);
        }
    .generalizecontent{
        width: 90%;
        margin: 0 auto;
        
        .icon_share{
            width: 33.3%;
            float: left;
            .shareimg{
                width: rem(105);
                height: rem(105);
                margin: rem(20) auto rem(20) auto;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
            p{
                text-align: center;
                font-size: rem(23);
            }
        }
    }
}
